<template>
  <div class="usercenter">
    <div class="userTop">
      <img :src="profile.avatarUrl" alt="" />
      <div class="TopBox">
        <p>{{ profile.nickname }}</p>
        <span
          ><i>{{ profile.follows }}</i
          >关注</span
        >
        <span
          ><i>{{ profile.followeds }}</i
          >粉丝</span
        >
        <span>Lv.{{ level }}</span>
      </div>
    </div>
    <div class="userFooter">
      <van-grid :gutter="10">
        <van-grid-item
          :icon="item.icon"
          :text="item.Text"
          v-for="item in iconsAndText"
          :key="item.Text"
          icon-color="red"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from "vue";
import { useStore } from "vuex";

export default {
  setup(props) {
    let { dispatch, state, commit } = useStore();

    //数据
    let states = reactive({
      //图标与文本
      iconsAndText: [
        {
          Text: "最近播放",
          icon: "play-circle",
        },
        {
          Text: "本地/下载",
          icon: "music",
        },
        {
          Text: "云盘",
          icon: "gift-card",
        },
        {
          Text: "已购",
          icon: "goods-collect",
        },
        {
          Text: "我的好友",
          icon: "friends",
        },
        {
          Text: "收藏和赞",
          icon: "star",
        },
        {
          Text: "我的博客",
          icon: "fire",
        },
        {
          Text: "音乐盒子",
          icon: "send-gift",
        },
      ],
      level: computed(() => state.user.userInfo.level),
      profile: computed(() => state.user.userInfo.profile || {}),
    });

    //钩子 触发vuex获取用户详情
    onMounted(() => {
      dispatch("user/getUser", state.user.userID);
    });

    return {
      ...toRefs(states),
    };
  },
};
</script>

<style lang='less' scoped>
.usercenter {
  .userTop {
    margin-top: 0.6rem;
    padding: 0 0.2rem;
    position: relative;
    img {
      position: absolute;
      top: -0.6rem;
      left: 50%;
      transform: translateX(-50%);
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      // border: 1px solid rgb(150, 146, 146);
    }
    .TopBox {
      width: 100%;
      text-align: center;
      padding-bottom: 0.1rem;
      background-color: #ccc;
      border-radius: 0.5rem;
      overflow: hidden;
      p {
        margin: 0.8rem 0 0.1rem 0;
        color: #fff;
        font-size: 0.36rem;
      }
      span {
        margin: 0 0.2rem 0 0;
        color: rgb(164, 159, 159);
        i {
          font-style: normal;
          margin-right: 0.04rem;
        }
      }
    }
  }
  .userFooter {
    margin-top: 0.4rem;
  }
}
</style>